import { createRouter, createWebHistory } from "vue-router"
import NProgress from "nprogress"
import "nprogress/nprogress.css" //这个样式必须引入
NProgress.configure({ showSpinner: false }) // 显示右上角螺旋加载提示
import { registerRoutes } from "@/router/registerRoutes"
import { userStore } from "@/store/userStore"
const routes = [
  {
    path: "/",
    redirect: "/XTModuleWorkflowEditor",
  },
  {
    path: "/menu",
    name: "menu",
    meta: {
      title: "菜单样式",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/menu.vue"),
  },
  {
    path: "/login",
    name: "login",
    meta: {
      title: "登录",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/Login.vue"),
  },
  {
    path: "/home",
    name: "home",
    meta: {
      title: "首页",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/home.vue"),
  },
  {
    path: "/password",
    name: "password",
    meta: {
      title: "密码加密测试",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/password.vue"),
  },
  {
    path: "/watermark",
    name: "watermark",
    meta: {
      title: "水印页面",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/watermark.vue"),
  },
  {
    path: "/theme",
    name: "theme",
    meta: {
      title: "水印页面",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/theme.vue"),
  },
  {
    path: "/testpage",
    name: "testpage",
    meta: {
      title: "测试页面",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/testpage.vue"),
  },
  {
    path: "/XTModuleWorkflowEditor",
    name: "XTModuleWorkflowEditor",
    meta: {
      title: "工作流编辑器",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/XTModuleWorkflowEditor.vue"),
  },
  {
    path: "/baseComponent",
    name: "baseComponent",
    meta: {
      title: "基础组件和业务组件测试页面",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/baseComponent.vue"),
  },
  {
    path: "/layout",
    name: "layout",
    meta: {
      title: "布局案例",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/layout.vue"),
  },
  {
    path: "/home2",
    name: "super",
    meta: {
      title: "超算页面",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/home2.vue"),
  },
  {
    path: "/work",
    name: "work",
    meta: {
      title: "工作台",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/work.vue"),
  },
  {
    path: "/XTModuleViewEditorHome",
    name: "XTModuleViewEditorHome",
    meta: {
      title: "视图编辑器",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/components/Business/XTModuleViewEditor/XTModuleViewEditorHome.vue"),
  },
  {
    path: "/newProject",
    name: "newProject",
    meta: {
      title: "创建项目",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/components/Business/newProject.vue"),
  },
  {
    path: "/newTask",
    name: "newTask",
    meta: {
      title: "创建任务",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/components/Business/newTask.vue"),
  },
  {
    path: "/gantt",
    name: "gantt",
    meta: {
      title: "甘特图案例",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/gantt.vue"),
  },
  {
    path: "/ganttTest",
    name: "ganttTest",
    meta: {
      title: "甘特图测试案例",
    },
    component: () => import(/* webpackChunkName: "XTModuleWorkflowEditor" */ "@/views/ganttTest.vue"),
  },
  {
    path: "/404",
    component: () => import(/* webpackChunkName: "404" */ "@/components/Basics/404.vue"),
  },
  {
    path: "/404",
    component: () => import(/* webpackChunkName: "404" */ "@/components/Basics/404.vue"),
  },

  //解决 刷新页面时请求路由为空，因为追加路由是在addRoute里做的，请求路由比addRoute早所以出现这问题，进行捕获处理
  {
    path: "/:catchAll(.*)",
    hidden: true,
    component: () => import(/* webpackChunkName: "404" */"@/components/Basics/404.vue"), //这个是我自己的路径
  },
]
const router = createRouter({
  history: createWebHistory("/fvue"),
  routes,
})

//路由拦截
router.beforeEach(async (to, from, next) => {
  NProgress.start()
  document.title = to.meta.title || "首页"

  const token = userStore()?.userInfo?.token
  const routesMap = userStore()?.routesMap

  //@1 白名单页面设置
  if (to.path === "/login") {
    next()
    return
  }

  //@2 访问其他页面没有登录去登录页面
  if (!token) {
    next("/login")
    return
  }

  //@3 状态库存储了路由数据 并且 没有直接刷新页面
  if (routesMap?.length > 0 && !userStore().isReferPage) {
    next()
    return
  }

  //@4 状态库有路由数据 并且 直接刷新了页面 {动态路由数据丢失，需要手动在进行创建}
  try {
    await registerRoutes(router)
    // 解决 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
    next({ ...to, replace: true })
  } catch (err) {
    console.log("动态注册路由失败 ...", err)
  }
})

router.afterEach(() => {
  NProgress.done()
})

export default router
